<template>
  <el-row v-if="istitle==='0' && !last" class="row1" type="flex">
    <el-col :span="6" v-if="data1" class="col1">
      <el-form-item>{{ data1 }}</el-form-item>
    </el-col>
    <el-col :span="6" v-if="data2" class="col1">
      <el-form-item>{{ data2 }}</el-form-item>
    </el-col>
    <el-col :span="6" v-if="data3" class="col1">
      <el-form-item>{{ data3 }}</el-form-item>
    </el-col>
    <el-col :span="6" v-if="data4">
      <el-form-item>{{ data4 }}</el-form-item>
    </el-col>
  </el-row>

  <el-row v-else-if="istitle==='1' && !last" class="row1" type="flex">
    <el-col :span="12" class="col1 title">{{ title1 }}</el-col>
    <el-col :span="12" class="title">{{ title2 }}</el-col>
  </el-row>

   <el-row v-else-if="istitle==='2' && !last" class="row1" type="flex">
    <el-col :span="6" class="col1">
      <el-form-item>{{ data1 }}</el-form-item>
    </el-col>
    <el-col :span="6" class="col1">
      <el-form-item>{{ data2 }}</el-form-item>
    </el-col>
    <el-col :span="12" class="title">{{ title2 }}</el-col>
  </el-row>

  <el-row v-else-if="istitle==='3' && !last" class="row1" type="flex">
    <el-col :span="24" class="title">{{ title3 }}</el-col>
  </el-row>

  <el-row v-else class="row2" type="flex">
    <el-col :span="6" v-if="data1" class="col1">
      <el-form-item>
        <p>{{ data1 }}</p>
      </el-form-item>
    </el-col>
    <el-col :span="6" v-if="data1" class="col1">
      <el-form-item>{{ data2 }}</el-form-item>
    </el-col>
    <el-col :span="6" v-if="data3" class="col1">
      <el-form-item>
        <p>{{ data3 }}</p>
      </el-form-item>
    </el-col>
    <el-col :span="6" v-if="data3">
      <el-form-item>{{ data4 }}</el-form-item>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    istitle: {
      type: String,
      default: '0'
    },
    title1: {
      type: String,
      default: ''
    },
    title2: {
      type: String,
      default: ''
    },
    title3: {
      type: String,
      default: ''
    },
    last: {
      type: Boolean,
      default: false
    },
    data1: {
      type: String | Number,
      default: ' '
    },
    data2: {
      type: String | Number,
      default: ' '
    },
    data3: {
      type: String | Number,
      default: ' '
    },
    data4: {
      type: String | Number,
      default: ' '
    }
  }
}
</script>

<style>
.row1 {
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
}
.row2 {
  border: 1px solid;
}
.col1 {
  border-right: 1px solid;
}
.title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  height: 36px;
  line-height: 36px;
}
</style>